<template>
    <div>
        <avatar v-if="avatarImg==''" icon="ios-person" size="150"></avatar>
        <avatar v-else v-bind:src="avatarImg" size="150"></avatar>
        <Button type="primary" @click="readyToChangeAvatar=true">更改头像</Button>
        <div v-if="readyToChangeAvatar">
            <Upload
                    type="drag"
                    :format="['jpg','jpeg','png']"
                    :on-format-error="pictureFormatError"
                    :before-upload="beforePictureUpload"
                    action="">
                <div style="padding: 20px 0">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>单击或拖拽您的头像至此处</p>
                </div>
            </Upload>
            <Row>
                <img v-bind:src="reviewAvatar" style="height: 100px;width: auto">
            </Row>
            <Row v-if="reviewAvatar!==''">
                <Button @click="uploadAvatar">确认上传</Button>
                <Button @click="cancelUploadAvatar">取消上传</Button>
            </Row>
        </div>
        <Card>
            <Row>
                <Col> 昵称：{{ userInfo.nickName }}</Col>
                <Col>
                    <Button type="primary" v-if="!NameChange" @click="NameChange=true">更改昵称</Button>
                    <Button type="primary" v-else @click="userNameChange">确认更改</Button>
                </Col>
            </Row>
            <Input v-if="NameChange" placeholder="新昵称" v-model="newName"></Input>
        </Card>
        <Card>
            <p slot="title">简介</p>
            <Row>
                <Col>
                    <p>{{ userInfo.userBrief }}</p>
                </Col>
                <Col>
                    <Button v-if="!BriefChange" @click="BriefChange=true">更新简介</Button>
                    <Button v-else @click="userBriefChange">确认更新</Button>
                </Col>
            </Row>
            <Input v-if="BriefChange" type="textarea" placeholder="新简介" v-model="newBrief"></Input>
        </Card>
        <Card>
            <p slot="title">邮箱</p>
            <Row>
                <Col>
                    <p>{{ userInfo.email }}</p>
                </Col>
                <Col>
                    <Button v-if="!EmailChange" @click="EmailChange=true">更新邮箱</Button>
                    <Button v-else @click="userEmailChange">确认更新</Button>
                </Col>
            </Row>
            <Input v-if="EmailChange" placeholder="新邮箱" v-model="newEmail"></Input>
        </Card>
        <Card>
            <p slot="title">住址</p>
            <Row>
                <Col>
                    <p>{{ userInfo.location }}</p>
                </Col>
                <Col>
                    <Button v-if="!LocationChange" @click="LocationChange=true">更新住址</Button>
                    <Button v-else @click="userlocationChange">确认更新</Button>
                </Col>
            </Row>
            <!--            <FormItem v-if="LocationChange" label="请选择您的新地址">-->
            <Cascader v-if="LocationChange" :data="city" v-model="citySelected" :value="citySelected"></Cascader>
            <!--            </FormItem>-->
        </Card>
    </div>
</template>

<script>
    import globalData from "@/utils/globalData";
    import axios from "axios";
    import city from "../../utils/city";

    export default {
        name: "Setting",
        data() {
            return {
                reviewAvatar: '',
                readyToChangeAvatar: false,
                userInfo: {},
                avatarImg: '',
                NameChange: false,
                BriefChange: false,
                EmailChange: false,
                LocationChange: false,
                newName: "",
                newBrief: "",
                newEmail: "",
                citySelected: "",
                city: city.city,
                file: ''
            }
        },
        created: function () {
            this.userInfo = globalData.USER
            let self = this
            console.log(this.userInfo.avatarUUId)
            if (this.userInfo.avatarUUId !== "") {
                axios({
                    method: 'get',
                    // url: "/file/avatar/test2",
                    url: "/file/sig/avatar/" + this.userInfo.avatarUUId,
                    responseType: 'blob'
                }).then(function (res) {
                    self.avatarImg = window.URL.createObjectURL(res.data)
                })
            }
        },
        methods: {
            cancelUploadAvatar() {
                this.file=''
                this.reviewAvatar=''
            },
            beforePictureUpload(file) {
                this.file = file
                this.reviewAvatar = window.URL.createObjectURL(file)
                return false
            },
            pictureFormatError() {
                console.log("ERROR")
            },
            uploadAvatar() {
                let self = this
                console.log(this.file)
                let formData = new FormData();
                formData.append("file", this.file);
                axios({
                    method: 'post',
                    url: '/file/avatar/' + globalData.USER.userId,
                    data: formData
                }).then(function () {
                    self.$Notice({
                        title: "上传成功!"
                    })
                })
            },
            avatarChange() {

            },
            userNameChange() {
                this.NameChange = true
                this.userInfo.nickName = this.newName
                this.changeItem("userName", this.newName)
                this.NameChange = false
            },
            userBriefChange() {
                this.BriefChange = true
                this.userInfo.userBrief = this.newBrief
                this.changeItem("userBrief", this.newBrief)
                this.BriefChange = false
            },
            userlocationChange() {
                this.LocationChange = true
                let newLocation = ""
                for (let i = 0; i < this.citySelected.length; i++) {
                    newLocation += this.citySelected[i]
                }
                this.userInfo.location = newLocation
                this.changeItem("location", newLocation)
                this.LocationChange = false
            },
            userEmailChange() {
                this.EmailChange = true
                this.userInfo.email = this.newEmail
                this.changeItem("email", this.newEmail)
                this.EmailChange = false
            },
            changeItem(Item, newValue) {
                let self = this
                axios({
                    method: 'patch',
                    url: "/user/setting/" + this.userInfo.userId + "/" + Item + "/" + newValue
                }).then(function () {
                    self.$Notice.success({
                        title: "修改成功"
                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>